<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>21_响应式布局-媒体特性</title>

        <style>
            body {
                background-color: #666;
            }

            h1 {
                text-align: center;
                font-size: 100px;
                color: white;
            }

            @media (width:800px) {
                body {
                    background-color: aqua;
                }
            }

            /* max-width代表的是 <= 600px */
            @media (max-width:600px) {
                body {
                    background-color: tomato;
                }
            }

            /* min-width 代表的是 >= 900px */
            @media (min-width:900px) {
                body {
                    background-color: yellowgreen;
                }
            }

            @media (device-width:1366px) {
                body {
                    background-color: red;
                }
            }

            /* （1） @media  */
            /* （2）width */
            /* （3）max-width */
            /* （4）min-width */
            /* （5）device-width */
        </style>

    </head>
    <body>
        <h1>佳乐唱啥</h1>
    </body>
</html>